<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 操作元素
  对象.innerText
  对象.innerHTML
 -->
  <div class="box">我是文字的内容</div>
  <div class="box1">我是文字的内容</div>
  <br>




  <!-- 随机抽奖案例 -->
  <strong>随机抽奖案例</strong>
  <table>
    <tr>
      <th>一等奖</th>
      <th>二等奖</th>
      <th>三等奖</th>
    </tr>
    <tr class="jiang">
      <th class="one">?</th>
      <th c class="two">?</th>
      <th class="three">?</th>
    </tr>

  </table>
</body>
<script>
  // 获取元素
  const box = document.querySelector('.box');
  //修改文字内容 对象.innerText 属性
  console.log(box.innerText);//获取文字内容
  //修改文字内容 对象.innerText 属性
  box.innerText = '我是修改后的文字内容'; //修改文字内容
  //innerText 不会解析标签
  box.innerText = '<strong>我是修改后的文字内容</strong>';

  //修改元素内容 对象.innerHTML  可以解析标签
  const box1 = document.querySelector('.box1');//获取元素内容
  //修改元素内容 对象.innerHTML  可以解析标签
  box1.innerHTML = '<strong>我是修改后的元素内容</strong>'; //修改元素内容


  //随机抽奖案例
  const arr = ['小明', '小红', '小刚', '小李'];
  const jiang = document.querySelectorAll('.jiang th');
  console.log(jiang); //获取奖项
  const randomNum = Math.floor(Math.random() * arr.length); //随机抽奖
  jiang[0].innerText = arr[randomNum]; //设置奖项
  arr.splice(randomNum, 1); //删除已抽奖项
  const randomNum1 = Math.floor(Math.random() * arr.length);
  jiang[1].innerText = arr[randomNum1];
  arr.splice(randomNum1, 1); //删除已抽奖项

  const randomNum2 = Math.floor(Math.random() * arr.length);
  jiang[2].innerText = arr[randomNum2];

</script>

</html> 